import React, { PureComponent } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Nav } from '@alifd/next';
import { headerMenuConfig } from '../../menuConfig';
import Logo from '../Logo';
import './index.scss';
import { connect } from  'react-redux';
import axios from 'axios';

class Header extends PureComponent {
  static propTypes = {};
  static defaultProps = {};

  logout = (accessToken) => {
    axios.get('http://localhost:9080/sys/logout?access_token='+accessToken).then((res) => {
      console.log(res);
      localStorage.clear();
      location.href = '/';
    }).catch((err)=>{
      console.log(err);
      console.log(err.response.status); 
      if(err.response.status === 401){
        localStorage.clear();
        location.href = '/';
      }
    })

  }

  render() {
    const { location = {} } = this.props;
    // console.log("localStorage.login", localStorage.getItem("login"));
    // console.log(loginStatus);
    let loginStatus = localStorage.getItem("login");
    let accessToken = localStorage.getItem("access_token");
    console.log(accessToken);
    const { pathname } = location;
    return (
      <div className="header-container">
        <div className="header-content">
          <Logo />
          <Nav
            className="header-navbar-menu"
            onClick={this.handleNavClick}
            selectedKeys={[pathname]}
            defaultSelectedKeys={[pathname]}
            direction="hoz"
            triggerType="click"
            activeDirection={null}
          >
            {headerMenuConfig &&
              headerMenuConfig.length > 0 &&
              headerMenuConfig.map((nav, index) => {
                if (nav.children && nav.children.length > 0) {
                  return (
                    <Nav.SubNav

                      key={index}
                      title={<span>{nav.name}</span>}
                    >
                      {nav.children.map((item) => {
                        const linkProps = {};
                        if (item.external) {
                          if (item.newWindow) {
                            linkProps.target = '_blank';
                          }

                          linkProps.href = item.path;
                          return (
                            <Nav.Item key={item.path}>
                              <a {...linkProps}>
                                <span>{item.name}</span>
                              </a>
                            </Nav.Item>
                          );
                        }
                        linkProps.to = item.path;
                        return (
                          <Nav.Item key={item.path}>
                            <Link {...linkProps}>
                              <span>{item.name}</span>
                            </Link>
                          </Nav.Item>
                        );
                      })}
                    </Nav.SubNav>
                  );
                }
                const linkProps = {};
                if (nav.external) {
                  if (nav.newWindow) {
                    linkProps.target = '_blank';
                  }
                  linkProps.href = nav.path;
                  return (
                    <Nav.Item key={nav.path}>
                      <a {...linkProps}>
                        <span>{nav.name}</span>
                      </a>
                    </Nav.Item>
                  );
                }
                linkProps.to = nav.path;
                return (
                  <Nav.Item key={nav.path}>
                    <Link {...linkProps}>
                      <span>{nav.name}</span>
                    </Link>
                  </Nav.Item>
                );
              })}
          </Nav>
          {
            loginStatus ?
            <div style={{width: "200px", height: "30px"}}>
              <div onClick={() => this.logout(accessToken)} className="logout-button">LOGOUT</div>
              <Link to="/center" className="ticket-button"> 个人中心 </Link>
            </div>
            :
            <Link to="/login" className="ticket-button"> 登录 </Link>
          }
        </div>
      </div>
    );
  }
}

// const mapState = (state) => ({
//   loginStatus: state.getIn(['login', 'login'])
// });

export default connect(null, null)(withRouter(Header));